<meta charset="UTF-8">
<style>
    ul {
        list-style: none;
        margin-top: 50px;
    }
    li {
        width: 100px;
        height: 30px;
        margin-bottom: 20px;
        text-align: center;
        line-height: 30px;
        background: skyblue;
        border-radius: 15px;
    }
    .tips {
        width:70px;
        height:30px;
        pointer-events:none;
        position: absolute;
        background-color: black; 
        color: white;
        display: none;
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
    }
    .tips::after {
        width: 0;
        height: 0;
        position: absolute;
        content: "";
        left: 25px;
        top: 30px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid black;
    }
    </style>
    <ul>
        <li>商品1</li>
        <li>商品2</li>
        <li>商品3</li>
        <li>商品4</li>
        <li>商品5</li>
    </ul>
    <div>
        <div class="tips"></div>
    </div>
    <script>
        var ulObj = document.querySelector('ul')
        ulObj.onmousemove = function(evt){
            var e = evt || window.event
            var target = e.target || e.srcElement
            if(target.nodeName == 'LI'){
                var tipsObj = document.querySelector('.tips')
                tipsObj.style.display = 'block'
                tipsObj.style.left = e.clientX - tipsObj.offsetWidth/2 + 'px'
                tipsObj.style.top = e.clientY - tipsObj.offsetHeight*2 + 'px'
                tipsObj.innerText = target.innerHTML
            } else {
                ulObj.onmouseout = function(){
                    var tipsObj = document.querySelector('.tips')
                    tipsObj.style.display = 'none'
                }
            }
        }
    </script>